<template>
  <div>
   <h1>内置组件</h1>
   <h3>动态组件 和 keep-alive组件 ：</h3>
   <button @click="changeComponent('ComputedWatch')">ComputedWatch组件</button>
   <button @click="changeComponent('Directives')">Directives组件</button>
   <button @click="changeComponent('Filters')">Filters组件</button>
   <!-- 
        - include` - 字符串或正则表达式。只有名称匹配的组件会被缓存。        可以用逗号分隔字符串、正则表达式或一个数组来表示：
        - `exclude` - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。   可以用逗号分隔字符串、正则表达式或一个数组来表示：
        - `max` - 数字。最多可以缓存多少组件实例。
   -->
   <!-- 匹配首先检查组件自身的 `name` 选项，
        如果 `name` 选项不可用，则匹配它的局部注册名称 (父组件 `components` 选项的键值)。匿名组件不能被匹配。 
   -->
   <keep-alive include="ComputedWatch, Directives, Filters" :max="4">
   <!-- <keep-alive :include="/ComputedWatch|Directives|Filters/"> -->
   <!-- <keep-alive :include="['ComputedWatch', 'Directives', 'Filters']"> -->
      <component :is="componentName"></component>
   </keep-alive>
   <!-- <slot> 到 slot 组件文件中查阅 </slot> -->
   <hr>
   
   <h3>过渡动画组件</h3>
   <div>
        <!-- css过渡 -->
        <div>
            <button @click="show = !show">
                Toggle过渡
            </button>
            <transition name="fade">
                <p v-if="show">hello</p>
            </transition>
        </div>
        
        <!-- css动画 -->
        <div id="example-2">
            <button @click="showBounce = !showBounce">Toggle show动画</button>
            <transition name="bounce">
                <p v-if="showBounce">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
            </transition>
        </div>
        <!-- JavaScript 钩子 -->
        <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"
        >
        </transition>
    </div>
  </div>
</template>

<script>
  export default {
      components: {
        ComputedWatch: () => import('./ComputedWatch.vue'),
        Directives: () => import('./Directives.vue'),
        Filters: () => import('./Filters.vue')
      },
      data(){
         return {
            componentName: "Filters",
            show: true,
            showBounce: true,
         }
      },
      methods: {
         changeComponent(val){
            this.componentName = val
         },

// 下面是过渡组件的方法：
        beforeEnter: function (el) {},
        // 当与 CSS 结合使用时  回调函数 done 是可选的
        // 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。
        // 否则，它们将被同步调用，过渡会立即完成。
        enter: function (el, done) {
            done()
        },
        afterEnter: function (el) {},
        enterCancelled: function (el) {},
        beforeLeave: function (el) {},
        // 当与 CSS 结合使用时  回调函数 done 是可选的
        leave: function (el, done) {
            done()
        },
        afterLeave: function (el) {},
        // leaveCancelled 只用于 v-show 中
        leaveCancelled: function (el) {}
      },
  }
</script>
<style scoped>
/* v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 */

/* v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，
在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 */

/* v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，
在过渡/动画完成之后移除。 */

/* v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 */

/* v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，
在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 */

/* v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，
在过渡/动画完成之后移除。 */
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    /* css动画 */
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>